import {useEffect, useState} from "react";
import MovieDetails
    from "./components/MovieDetails";
import Loader from "./components/Loader";

import NavBar from "./components/NavBar";
import NumResults from "./components/NumResults";
import Search from "./components/Search";
import Main from "./components/Main";
import Box from "./components/Box";
import MovieList from "./components/MovieList";
import ErrorMessage
    from "./components/ErrorMessage";
import WatchedSummary
    from "./components/WatchedSummary";
import WatchedMoviesList
    from "./components/WatchedMoviesList";
import useLocalStorageState
    from "./useLocalStorageState";


const KEY ='f84fc31d';

function App() {
    const [movies, setMovies] = useState([]);
    const [isLoading,setIsLoading] = useState(false);
    const [error,setError] = useState("");
    const [query,setQuery] = useState("back");
    const [selectedId,setSelectedId] = useState("");

    //const [watched, setWatched] = useState([]);

    const [watched,setWatched] = useLocalStorageState([],"watched");



    function handleSelectMovie(id){
        setSelectedId((selectedId) => (id === selectedId ? null : id));
    }

    function handleCloseMovie(){
        setSelectedId(null);
    }

    function handleAddWatched(movie){
        setWatched((watched)=>[...watched,movie]);

        // localStorage.setItem('watched',JSON.stringify([...watched,movie]));
    }



    function handleDeleteWatched(id){
        setWatched((watched)=> watched.filter((movie)=>
        movie.imdbID !== id));
    }

    useEffect( function() {
        const controller = new AbortController();

        async function fetchMovies(){
            try{
                setIsLoading(true);
                setError("");

                const res = await fetch(`http://www.omdbapi.com/?apikey=${KEY}&s=${query}`,
                    { signal:controller.signal }
                    );

                if(!res.ok){
                    throw new Error("Something went wrong with fetching movies");
                }

                const data = await res.json();
                if(data.Response === "False"){
                    throw new Error("Movie not found")
                }
                setMovies(data.Search);
                setError("");


            }catch(err){
                if(err.name !== "AbortError"){
                    setError(err.message);
                }
            }finally {
                setIsLoading(false);
            }
        }

        if(query.length < 3){
            setMovies([]);
            setError('');
            return;
        }

        fetchMovies();

        return function(){
            controller.abort();
        }
    },[query]);


  return (
      <>
          <NavBar>
              <Search query={query} setQuery={setQuery}/>
              <NumResults  movies={movies}/>
          </NavBar>
        <Main>
            <Box>
                { isLoading && <Loader /> }
                {
                    !isLoading && !error && <MovieList movies={movies} onSelectMovie={handleSelectMovie}/>
                }
                {error && <ErrorMessage message={error} /> }
            </Box>
            <Box>
                {
                    selectedId ? (
                        <MovieDetails
                            selectedId={selectedId}
                            onCloseMovie={handleCloseMovie}
                            onAddWatched ={handleAddWatched}
                            watched ={ watched }
                        />
                    ):(
                        <>
                            <WatchedSummary watched={watched}/>
                            <WatchedMoviesList
                                watched={watched}
                                onDeleteWatched = { handleDeleteWatched }
                            />
                        </>
                    )
                }
            </Box>
        </Main>
      </>
  );
}





export default App;
